<template>
  <div class="class-system">
      <div class="top-tools">
          <h3>各组织参与不同课程体系的人数分布</h3>
      </div>
      <div id="classSystem"></div>
  </div>
</template>

<script>
import { Chart } from '@antv/g2';
export default {
    data(){
        return{
            data:[
                { name: '多彩青春计划', title: '人文', value: 0 },
                { name: '多彩青春计划', title: '本科生院（书院）', value: 2 },
                { name: '多彩青春计划', title: '电子工程学院', value: 1 },
                { name: '多彩青春计划', title: '机电工程学院', value: 4 },
                { name: '多彩青春计划', title: '经济与管理学院', value: 1 },
                { name: '多彩青春计划', title: '空间科学与技术学院', value: 31 },
                { name: '多彩青春计划', title: '人工智能学院', value: 2 },
                { name: '多彩青春计划', title: '生命科学技术学院', value: 0 },
                { name: '多彩青春计划', title: '数学与统计学院', value: 2 },
                { name: '多彩青春计划', title: '通信工程学院', value: 2 },
                { name: '多彩青春计划', title: '外国语学院', value: 0 },
                { name: '多彩青春计划', title: '网络与信息安全学院', value: 1 },
                { name: '多彩青春计划', title: '物理与光电工程学院', value: 2 },
                { name: '多彩青春计划', title: '先进材料与纳米科技学院', value: 2 },
                { name: '多彩青春计划', title: '海棠八号书院', value: 1 },
                { name: '多彩青春计划', title: '海棠九号书院', value: 0 },
                { name: '多彩青春计划', title: '海棠七号书院', value: 1 },



                { name: '红色筑梦计划', title: '人文', value: 2 },
                { name: '红色筑梦计划', title: '本科生院（书院）', value: 1 },
                { name: '红色筑梦计划', title: '电子工程学院', value: 3 },
                { name: '红色筑梦计划', title: '经济与管理学院', value: 0 },
                { name: '红色筑梦计划', title: '空间科学与技术学院', value: 0 },
                { name: '红色筑梦计划', title: '人工智能学院', value: 0 },
                { name: '红色筑梦计划', title: '生命科学技术学院', value: 1 },
                { name: '红色筑梦计划', title: '数学与统计学院', value: 0 },
                { name: '红色筑梦计划', title: '通信工程学院', value: 2 },
                { name: '红色筑梦计划', title: '外国语学院', value: 1 },
                { name: '红色筑梦计划', title: '网络与信息安全学院', value: 0 },
                { name: '红色筑梦计划', title: '物理与光电工程学院', value: 14 },
                { name: '红色筑梦计划', title: '先进材料与纳米科技学院', value: 2 },
                { name: '红色筑梦计划', title: '海棠八号书院', value: 1 },
                { name: '红色筑梦计划', title: '海棠九号书院', value: 0 },
                { name: '红色筑梦计划', title: '海棠七号书院', value: 1 },
                { name: '红色筑梦计划', title: '机电工程学院', value: 0 },


                
                { name: '师长领航计划', title: '人文', value: 0 },
                { name: '师长领航计划', title: '本科生院（书院）', value: 4 },
                { name: '师长领航计划', title: '电子工程学院', value: 0 },
                { name: '师长领航计划', title: '经济与管理学院', value: 0 },
                { name: '师长领航计划', title: '空间科学与技术学院', value: 0 },
                { name: '师长领航计划', title: '人工智能学院', value: 0 },
                { name: '师长领航计划', title: '生命科学技术学院', value: 0 },
                { name: '师长领航计划', title: '数学与统计学院', value: 0 },
                { name: '师长领航计划', title: '通信工程学院', value: 1 },
                { name: '师长领航计划', title: '外国语学院', value: 0 },
                { name: '师长领航计划', title: '网络与信息安全学院', value: 0 },
                { name: '师长领航计划', title: '物理与光电工程学院', value: 0 },
                { name: '师长领航计划', title: '先进材料与纳米科技学院', value:0 },
                { name: '师长领航计划', title: '海棠八号书院', value: 0 },
                { name: '师长领航计划', title: '海棠九号书院', value: 0 },
                { name: '师长领航计划', title: '海棠七号书院', value: 0 },
                { name: '师长领航计划', title: '机电工程学院', value: 0 },
                
                
                { name: '经典悦读计划', title: '人文', value: 0 },
                { name: '经典悦读计划', title: '本科生院（书院）', value: 0 },
                { name: '经典悦读计划', title: '电子工程学院', value: 0 },
                { name: '经典悦读计划', title: '经济与管理学院', value: 0 },
                { name: '经典悦读计划', title: '空间科学与技术学院', value: 0 },
                { name: '经典悦读计划', title: '人工智能学院', value: 0 },
                { name: '经典悦读计划', title: '生命科学技术学院', value: 0 },
                { name: '经典悦读计划', title: '数学与统计学院', value: 0 },
                { name: '经典悦读计划', title: '通信工程学院', value: 0 },
                { name: '经典悦读计划', title: '外国语学院', value: 0 },
                { name: '经典悦读计划', title: '网络与信息安全学院', value: 0 },
                { name: '经典悦读计划', title: '物理与光电工程学院', value: 0 },
                { name: '经典悦读计划', title: '先进材料与纳米科技学院', value:0 },
                { name: '经典悦读计划', title: '海棠八号书院', value: 0 },
                { name: '经典悦读计划', title: '海棠九号书院', value: 0 },
                { name: '经典悦读计划', title: '海棠七号书院', value: 1 },
                { name: '经典悦读计划', title: '机电工程学院', value: 0 },


                { name: '全球胜任力计划', title: '人文', value: 0 },
                { name: '全球胜任力计划', title: '本科生院（书院）', value: 0 },
                { name: '全球胜任力计划', title: '电子工程学院', value: 0 },
                { name: '全球胜任力计划', title: '经济与管理学院', value: 0 },
                { name: '全球胜任力计划', title: '空间科学与技术学院', value: 0 },
                { name: '全球胜任力计划', title: '人工智能学院', value: 0 },
                { name: '全球胜任力计划', title: '生命科学技术学院', value: 0 },
                { name: '全球胜任力计划', title: '数学与统计学院', value: 0 },
                { name: '全球胜任力计划', title: '通信工程学院', value: 0 },
                { name: '全球胜任力计划', title: '外国语学院', value: 1 },
                { name: '全球胜任力计划', title: '网络与信息安全学院', value: 0 },
                { name: '全球胜任力计划', title: '物理与光电工程学院', value: 0 },
                { name: '全球胜任力计划', title: '先进材料与纳米科技学院', value:0 },
                { name: '全球胜任力计划', title: '海棠八号书院', value: 0 },
                { name: '全球胜任力计划', title: '海棠九号书院', value: 0 },
                { name: '全球胜任力计划', title: '海棠七号书院', value: 1 },
                { name: '全球胜任力计划', title: '机电工程学院', value: 0 },


                { name: '先锋论坛计划', title: '人文', value: 0 },
                { name: '先锋论坛计划', title: '本科生院（书院）', value: 0 },
                { name: '先锋论坛计划', title: '电子工程学院', value: 0 },
                { name: '先锋论坛计划', title: '机电工程学院', value: 0},
                { name: '先锋论坛计划', title: '经济与管理学院', value: 0 },
                { name: '先锋论坛计划', title: '空间科学与技术学院', value: 1 },
                { name: '先锋论坛计划', title: '人工智能学院', value: 0 },
                { name: '先锋论坛计划', title: '生命科学技术学院', value: 0 },
                { name: '先锋论坛计划', title: '数学与统计学院', value: 0 },
                { name: '先锋论坛计划', title: '通信工程学院', value: 1 },
                { name: '先锋论坛计划', title: '外国语学院', value: 0 },
                { name: '先锋论坛计划', title: '网络与信息安全学院', value: 0 },
                { name: '先锋论坛计划', title: '物理与光电工程学院', value: 0 },
                { name: '先锋论坛计划', title: '先进材料与纳米科技学院', value:0 },
                { name: '先锋论坛计划', title: '海棠八号书院', value: 0 },
                { name: '先锋论坛计划', title: '海棠九号书院', value: 0 },
                { name: '先锋论坛计划', title: '海棠七号书院', value: 0 },



                { name: '春粟劳育计划', title: '人文', value: 0 },
                { name: '春粟劳育计划', title: '本科生院（书院）', value: 0 },
                { name: '春粟劳育计划', title: '电子工程学院', value: 0 },
                { name: '春粟劳育计划', title: '经济与管理学院', value: 0 },
                { name: '春粟劳育计划', title: '空间科学与技术学院', value: 2 },
                { name: '春粟劳育计划', title: '人工智能学院', value: 0 },
                { name: '春粟劳育计划', title: '生命科学技术学院', value: 0 },
                { name: '春粟劳育计划', title: '数学与统计学院', value: 0 },
                { name: '春粟劳育计划', title: '通信工程学院', value: 1 },
                { name: '春粟劳育计划', title: '外国语学院', value: 0 },
                { name: '春粟劳育计划', title: '网络与信息安全学院', value: 0 },
                { name: '春粟劳育计划', title: '物理与光电工程学院', value: 0 },
                { name: '春粟劳育计划', title: '先进材料与纳米科技学院', value:0 },
                { name: '春粟劳育计划', title: '海棠八号书院', value: 0 },
                { name: '春粟劳育计划', title: '海棠九号书院', value: 0 },
                { name: '春粟劳育计划', title: '海棠七号书院', value: 0 },
                { name: '春粟劳育计划', title: '机电工程学院', value: 0 },



                { name: '双创引领计划', title: '人文', value: 0 },
                { name: '双创引领计划', title: '本科生院（书院）', value: 0 },
                { name: '双创引领计划', title: '电子工程学院', value: 0 },
                { name: '双创引领计划', title: '经济与管理学院', value: 0 },
                { name: '双创引领计划', title: '空间科学与技术学院', value: 0 },
                { name: '双创引领计划', title: '人工智能学院', value: 0 },
                { name: '双创引领计划', title: '生命科学技术学院', value: 0 },
                { name: '双创引领计划', title: '数学与统计学院', value: 0 },
                { name: '双创引领计划', title: '通信工程学院', value: 1 },
                { name: '双创引领计划', title: '外国语学院', value: 0 },
                { name: '双创引领计划', title: '网络与信息安全学院', value: 0 },
                { name: '双创引领计划', title: '物理与光电工程学院', value: 0 },
                { name: '双创引领计划', title: '先进材料与纳米科技学院', value:0 },
                { name: '双创引领计划', title: '海棠八号书院', value: 0 },
                { name: '双创引领计划', title: '海棠九号书院', value: 0 },
                { name: '双创引领计划', title: '海棠七号书院', value: 0 },
                { name: '双创引领计划', title: '机电工程学院', value: 0 },

                		
            ]
        }

    },
    methods:{
        createChart(){
            const chart = new Chart({
                container: 'classSystem',
                autoFit: true,
                height: 400,
            });

            chart.data(this.data);
            chart.tooltip({
                shared: true,
                showMarkers: false,
            });
            chart.axis('title',{
                label:{
                    style:{
                        fill:'#fff',
                        fontSize:14
                    }
                }
            })
            chart.axis('value',{
                label:{
                    style:{
                        fill:'#fff',
                    }
                }
            })
            chart.legend({
                itemName:{
                    style:{
                        fill:'#fff',
                        fontSize:16,
                        lineHeight:18
                    }
                },
                marker:{
                    style:{
                        r:8
                    }
                }
            })
            chart
            .interval()
            .position('title*value')
            .size(16)
            .color('name')
            .adjust('stack');

            chart.interaction('active-region');

            chart.render();
	  }
    },
    mounted(){
        this.createChart()
    }
}
</script>

<style lang="scss" scoped>
.class-system{
    padding: 12px 20px;
    .top-tools{
        display: flex;
        justify-content: space-between;
        align-items: center;
        h3{
            font-size: 16px;
            height: 16px;
            line-height: 16px;
            padding-left: 10px;
            border-left: 4px solid #00FFEE;
            margin-bottom: 20px;
        }
    }
}
</style>